<template>
    <div class="row-box">
        <div v-if='this.$store.state.examination_show' style='width:100%; height:100%;'>
            <div class='row-box-content'>
                <div style='display:flex; justify-content: space-between;'>
                    <el-upload
                        v-model:file-list="fileList"
                        class="upload-demo"
                        :http-request="handleRequest"
                        accept=".xlsx">
                        <el-button type="primary">上传题库</el-button>
                    </el-upload>
                    <div>
                        <el-select
                            v-model="Type_question"
                            filterable
                            default-first-option
                            :reserve-keyword="false"
                            value-key="kind_id"
                            placeholder="请选择试题类型"
                            style="width:300px;"
                        >
                            <el-option
                                v-for="item in TimeData"
                                :key="item.kind_id"
                                :label="item.kind_name"
                                :value="item"
                            />
                        </el-select>
                    </div>
                    <div>
                        <el-button type="primary" @click="uploadevent(item)" round>确认上传</el-button>
                        <el-button type="danger"  @click="deleteRow(item)" round>删除</el-button>
                    </div>
                </div>
                <div class='table_content'>
                    <el-table
                        height="100%"
                        :data="this.$store.state.tableDataTwo"
                        @selection-change="handleSelectionChange"
                        stripe
                        style="width: 100%;">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            v-for="(item,index) in this.$store.state.TabData"
                            :prop="item.prop"
                            :label='item.name'
                            width="180">
                        </el-table-column>
                    </el-table>
                    <div style='display:flex; justify-content: center;'>
                        <el-pagination
                            background
                            @current-change="pagesChange"
                            layout="prev, pager, next"
                            :total="tableDataTwoLength">
                        </el-pagination>
                    </div>
                </div>
            </div>
          
        </div>
        <div v-else>
            <el-icon  color="#409efc" :size="90" class="is-loading">
                <Loading />
            </el-icon>
        </div>

        <el-drawer v-model="Question_type" title="设置题目类型" :with-header="false">
            <span>类型名称：&nbsp;&nbsp;&nbsp;</span>
            <el-input v-model="this.$store.state.Question_typename" style="width: 240px" placeholder="请输入题型名称" />
        </el-drawer>

    </div>
</template>
<script>
import { toRaw } from 'vue';
import { reactive } from 'vue';
import { read, utils } from 'xlsx';
import { setImportHistory } from '../utils/index';

export default {
    name: '',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    data () {
        return {
            fileList:[],
            DataLin:[],
            tableDataTwoLength:10,
            delesplice:[],
            Question_type:false,
            TimeData:[],
            Type_question:'',  // 类型题
        }
    },
    computed: {},
// 侦听器
    watch: {},
    created () {},
    mounted () {
        this.get('/kind/').then(res=>{
            if(res.code == 200){
                this.TimeData = res.data
                console.log(this.TimeData)
            }
        })
    },
// 组件方法
    methods: {
        deleteRow(){
            this.delesplice.forEach((item,index) =>{
                this.$store.state.tableDataTwo.forEach((val,INX) =>{
                    if(item.id == val.id){
                        this.$store.state.tableDataTwo.splice(INX,1)
                    }
                })
                this.$store.state.tableDataTwoData.forEach((val,INX) =>{
                    if(item.id == val.id){
                        this.$store.state.tableDataTwoData.splice(INX,1)
                    }
                })
            })
        },
        uploadevent(){
            if(this.Type_question == ""){
                this.$message({
                    message: '请选择试题类型',
                    type: 'error',
                })
                return
            }
            this.$store.dispatch('test_paper',this.Type_question)
        },
        handleSelectionChange (val) {
            this.delesplice = val
        },
        pagesChange(val){
            this.$store.state.tableDataTwo = []
            for(let i=Number(val+'0'-10); i<Number(val+'0'); i++){
                this.$store.state.tableDataTwo.push(this.$store.state.tableDataTwoData[i])
            }
        },
        handleRequest (fileData) {
            this.Question_type = false
            this.$store.state.tableDataTwoData = []
            this.$store.state.tableDataTwo = []
            this.$store.state.TabData = []
            setImportHistory({ file: fileData.file.name});
            this.readXLSX(fileData.file) .then((res) => {
                this.tableDataTwoLength = res.length
                res.forEach((item,index) => {
                    item["id"] = index
                });
                delete res[0].id
                for(let i in res[0]){
                    this.$store.state.TabData.push({
                        name:i,
                        prop:i
                    })
                }
                this.$store.state.tableDataTwoData = res
                for(let i=0; i<res.length; i++){
                    if(i<=9){
                        this.$store.state.tableDataTwo.push(res[i])
                    }
                }
            }).catch((err) => {

            });
        },
        readXLSX (file) {
            let nameSplit = file.name.split('.');
            let format = nameSplit[nameSplit.length - 1];
            if (!['xlsx', 'csv'].includes(format)) {
                return false;
            }
            return new Promise((resolve, reject) => {
                let reader = new FileReader();
                reader.readAsBinaryString(file);
                reader.onload = function (evt) {
                    let data = evt.target.result;
                    try {
                        var workbook = read(data, { type: 'binary' });
                        const wsname = workbook.SheetNames[0];  
                        const ws = utils.sheet_to_json(workbook.Sheets[wsname]); 
                        resolve(ws);
                    } catch (err) {
                        reject('some wrong with import');
                    }
                };
            });
        },
    },
    // 创建前
    beforeCreate () { },
    // 挂载前
    beforeMount () {},
    // 更新前 
    beforeUpdate () {},
    updated () {},
    // 组件创建最初始keep-alive标签中有效
    activated () { },
    // 组件停用时
    deactivated () {},
    // 销毁前
    beforeDestroy () {},
    // 销毁后
    destroyed () {}
}
</script> 
<style scoped>
.table_content{
    width:100%; 
    height: 90%;
}
.table_content::-webkit-scrollbar {
    width: 0;
} 
.row-box-content{
    width: 100%;
    height: 98%;
    overflow: auto;
}
.row-box{
    width:100%;
    height:98%;
}
</style>